<template>
  <view class="container">
    <!-- 顶部渐变背景区域 -->
    <view class="header-section">
      <!-- 默写报告模块 -->
      <view class="report-header">
        <view class="report-left">
          <view class="report-title">默写批改报告</view>
          <view class="report-desc">1. 建议重点训练"是、做"等字。</view>
          <view class="report-desc">2. 重点关注"小明"的学习情况，他的错误较多</view>
        </view>
        <view class="report-right">
          <view class="task-detail f f-a-c f-j-c">任务详情
            <image src="/static/youjiantou.png" style="width: 30rpx;height: 30rpx;" mode=""></image>
          </view>
          <view class="ai-bg">
            <image src="/static/AI.png" class="ai-icon" mode="aspectFit"></image>
          </view>
        </view>
      </view>
    </view>

    <!-- 数据统计模块 -->
    <view class="stats-section">
      <view class="stats-grid">
        <view class="stat-item">
          <text class="stat-label">人数:{{ reportData.submitNum }}</text>
        </view>
        <view class="stat-item">
          <text class="stat-label">提交:{{ reportData.submitNum }}</text>
        </view>
        <view class="stat-item">
          <text class="stat-label">AI批改:{{ reportData.submitNum }}</text>
        </view>
        <view class="stat-item">
          <text class="stat-label">异常:0</text>
        </view>
        <view class="stat-item">
          <text class="stat-label">未审阅:0</text>
        </view>
        <view class="stat-item">
          <text class="stat-label">未提交:0</text>
        </view>
      </view>

      <view class="summary-stats">
        <view class="summary-item">
          <text class="summary-number">{{ reportData.allCorrectNum }}</text>
          <text class="summary-label">全对</text>
        </view>
        <view class="summary-item">
          <text class="summary-number">{{ reportData.errorNum }}</text>
          <text class="summary-label">有错</text>
        </view>
        <view class="summary-item">
          <text class="summary-number">0</text>
          <text class="summary-label">未批改</text>
        </view>
      </view>
    </view>

    <!-- 错误统计图表 -->
    <view class="chart-section">
      <view class="chart-header">
        <view class="chart-title-wrapper f f-a-c f-j-c">
          <view style="margin-top: -15rpx;" class="chart-title">错误统计</view>
        </view>
      </view>
      <view class="chart-container">
        <eachet :nameList="studentNameList" :list="studentErrorList"></eachet>
      </view>
    </view>

    <!-- 错字统计图表 -->
    <view class="chart-section">
      <view class="chart-header">
        <view class="chart-title-wrapper f f-a-c f-j-c">
          <view style="margin-top: -15rpx;" class="chart-title">错字统计</view>
        </view>
      </view>
      <view class="chart-container">
        <eachet3 :nameList="errorZiNameList" :list="errorZiList"></eachet3>
      </view>
    </view>

		<!-- 作业展示模块 -->
		<view class="homework-section">
			<!-- 异常作业 -->
			<view class="homework-category">
				<view class="category-header">
					<view class="category-tag abnormal">异</view>
					<text class="category-title">异常作业</text>
					<text class="category-action">分享</text>
					<image class="share-icon" src="/static/youjiantou.png"></image>
				</view>
				<view class="homework-images">
					<image 
						v-for="(img, index) in abnormalHomework" 
						:key="index"
						:src="img"
						class="homework-img"
						@click="previewImage(img, abnormalHomework)"
					></image>
				</view>
			</view>
			
			<!-- 优秀作业 -->
			<view class="homework-category">
				<view class="category-header">
					<view class="category-tag excellent">优</view>
					<text class="category-title">优秀作业</text>
					<text class="category-action">分享</text>
					<image class="share-icon" src="/static/youjiantou.png"></image>
				</view>
				<view class="homework-images">
					<image 
						v-for="(img, index) in excellentHomework" 
						:key="index"
						:src="img"
						class="homework-img"
						@click="previewImage(img, excellentHomework)"
					></image>
				</view>
			</view>
			
			<!-- 待提升作业 -->
			<view class="homework-category">
				<view class="category-header">
					<view class="category-tag improve">待</view>
					<text class="category-title">待提升作业</text>
					<text class="category-action">分享</text>
					<image class="share-icon" src="/static/youjiantou.png"></image>
				</view>
				<view class="homework-images">
					<image 
						v-for="(img, index) in improveHomework" 
						:key="index"
						:src="img"
						class="homework-img"
						@click="previewImage(img, improveHomework)"
					></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uCharts from '@qiun/ucharts';

	export default {
		data() {
			return {
					// 错误统计数据
					errorChartData: {
						categories: ['1', '2', '3', '4', '5', '6', '7'],
						series: [{
							name: '错误次数',
							data: [8, 12, 15, 9, 8, 6, 8]
						}]
					},
					// 错字统计数据
					wordChartData: {
						categories: ['1', '2', '3', '4', '5', '6', '7'],
						series: [{
							name: '错字次数',
							data: [9, 11, 13, 8, 9, 6, 8]
						}]
					},
					errorChart: null,
					wordChart: null,
					// 作业图片数据
					abnormalHomework: [
						'/static/1.png',
						'/static/2.jpg',
						'/static/1.png'
					],
					excellentHomework: [
						'/static/1.png',
						'/static/2.jpg',
						'/static/1.png'
					],
					improveHomework: [
						'/static/1.png',
						'/static/2.jpg',
						'/static/1.png'
					]
				}
		},
		onReady() {
			this.initErrorChart();
			this.initWordChart();
		},
		methods: {
			// 预览图片
			previewImage(current, urls) {
				uni.previewImage({
					current: current,
					urls: urls
				});
			},
			// 初始化错误统计图表
			initErrorChart() {
				this.errorChart = new uCharts({
					type: 'column',
					context: uni.createCanvasContext('errorChart', this),
					width: uni.upx2px(690),
					height: uni.upx2px(400),
					categories: this.errorChartData.categories,
					series: this.errorChartData.series,
					animation: true,
					background: '#FFFFFF',
					color: ['#6236FF'],
					padding: [15, 15, 0, 5],
					enableScroll: false,
					legend: {
						show: false
					},
					xAxis: {
						disableGrid: true,
						itemCount: 10,
						scrollShow: true
					},
					yAxis: {
						gridType: 'dash',
						dashLength: 2,
						data: [{
							min: 0,
							max: 20
						}]
					},
					extra: {
						column: {
							type: 'group',
							width: uni.upx2px(18),
							activeBgColor: '#000000',
							activeBgOpacity: 0.08
						}
					}
				});
			},

			// 初始化错字统计图表
			initWordChart() {
				this.wordChart = new uCharts({
					type: 'column',
					context: uni.createCanvasContext('wordChart', this),
					width: uni.upx2px(690),
					height: uni.upx2px(400),
					categories: this.wordChartData.categories,
					series: this.wordChartData.series,
					animation: true,
					background: '#FFFFFF',
					color: ['#6236FF'],
					padding: [15, 15, 0, 5],
					enableScroll: false,
					legend: {
						show: false
					},
					xAxis: {
						disableGrid: true,
						itemCount: 10,
						scrollShow: true
					},
					yAxis: {
						gridType: 'dash',
						dashLength: 2,
						data: [{
							min: 0,
							max: 20
						}]
					},
					extra: {
						column: {
							type: 'group',
							width: uni.upx2px(18),
							activeBgColor: '#000000',
							activeBgOpacity: 0.08
						}
					}
				});
			},

			// 错误统计图表触摸事件
			touchErrorChart(e) {
				this.errorChart.showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data
					}
				});
			},

			moveErrorChart(e) {
				this.errorChart.scroll(e);
			},

			touchEndErrorChart(e) {
				this.errorChart.hideToolTip();
			},

			// 错字统计图表触摸事件
			touchWordChart(e) {
				this.wordChart.showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data
					}
				});
			},

			moveWordChart(e) {
				this.wordChart.scroll(e);
			},

			touchEndWordChart(e) {
				this.wordChart.hideToolTip();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		background: linear-gradient(180deg, #05C490 0%, #5CDFA9 33%, #8EF3BF 66%, #ECF2F0 100%);
	}

	// 顶部渐变背景区域
	.header-section {
		padding: 30rpx;
		padding-bottom: 0;
	}

	// 听写报告模块
	.report-header {

		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin-bottom: 30rpx;

		.report-left {
			flex: 1;
			position: relative;
			z-index: 10;
			margin-right: 30rpx;

			.report-title {
				font-size: 36rpx;
				font-weight: bold;
				color: #333;
				margin-bottom: 20rpx;
			}

			.report-desc {
				font-size: 28rpx;
				color: #666;
				line-height: 1.5;
				margin-bottom: 10rpx;
			}
		}

		.report-right {
			display: flex;
			flex-direction: column;
			align-items: center;

			.task-detail {
				font-size: 28rpx;
				color: #fff;
				margin-bottom: 20rpx;
				text-align: right;
			}

			.ai-bg {
				position: relative;
				display: flex;
				flex-direction: column;
				align-items: center;

				.ai-icon {
					position: absolute;
					z-index: 1;
					width: 270rpx;
					height: 234rpx;
					top: -40rpx;
					right: -80rpx;
				}

				.ai-text {
					font-size: 24rpx;
					color: #333;
					margin-top: 10rpx;
				}
			}
		}
	}

	// 数据统计模块
	.stats-section {
		position: relative;
		z-index: 10;
		margin: 30rpx;
		background: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);

		.stats-grid {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 20rpx;
			margin-bottom: 40rpx;

			.stat-item {
				padding: 20rpx;
				background: linear-gradient(309deg, #E6FAFE 0%, #D1FFEB 100%);
				border-radius: 12rpx;
				text-align: center;

				.stat-label {
					font-size: 28rpx;
					color: #007D5B;
					font-weight: 500;
				}
			}
		}

		.summary-stats {
			display: flex;
			justify-content: space-around;
			align-items: center;

			.summary-item {
				display: flex;
				flex-direction: column;
				align-items: center;

				.summary-number {
					font-size: 48rpx;
					font-weight: bold;
					color: #007D5B;
					margin-bottom: 10rpx;
				}

				.summary-label {
					font-size: 28rpx;
					color: #007D5B;
				}
			}
		}
	}

	// 图表区域
	.chart-section {
		margin: 30rpx;
		background: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);

		.chart-header {
			display: flex;
			justify-content: flex-start;
			margin-bottom: 20rpx;

			.chart-title-wrapper {
				width: 200rpx;
				height: 67rpx;
				position: relative;
				top: -40rpx;
				left: -50rpx;
				display: flex;
				align-items: center;
				background: url('/static/chatTitle.png') no-repeat center center;
				background-size: 100% 100%;


				.chart-title {
					font-size: 28rpx;
					color: white;
					font-weight: 500;
					text-align: center;
				}
			}
		}

		.chart-container {
			width: 100%;
			height: 400rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			.charts {
				width: 690rpx;
				height: 400rpx;
			}
		}
	}

	/* 作业展示模块样式 */
	.homework-section {
		margin: 30rpx;
		margin-top: 0;
	}

	.homework-category {
		background: white;
		border-radius: 20rpx;
		margin-bottom: 30rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
	}

	.category-header {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.category-tag {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		font-size: 28rpx;
		font-weight: bold;
		margin-right: 20rpx;
	}

	.category-tag.abnormal {
		background: #FF6B35;
	}

	.category-tag.excellent {
		background: #FFD700;
	}

	.category-tag.improve {
		background: #999;
	}

	.category-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		flex: 1;
	}

	.category-action {
		font-size: 28rpx;
		color: #666;
		margin-right: 10rpx;
	}

	.share-icon {
		width: 24rpx;
		height: 24rpx;
	}

	.homework-images {
		display: flex;
		gap: 20rpx;
	}

	.homework-img {
		width: 200rpx;
		height: 280rpx;
		border-radius: 12rpx;
		border: 2rpx solid #eee;
	}
</style>